import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, ScrollView } from 'react-native';

import styled from 'styled-components';
import { queryPoliceAppraisalList } from '../../api';
import { getToken } from '../../utils/auth';
import DatePickerView from 'antd-mobile-rn/lib/date-picker-view';
import moment from 'moment';

export default class perforAppraisal extends Component {
  // state = {
  //   imgUrl: require('../../assets/work/perforAppraisal/cal.png'),
  //   datetime: '2016-05-05 20:00',
  //   datetime1: ''
  // };
  constructor() {
    super(...arguments);
    this.state = {
      value: new Date(),
      imgUrl: require('../../assets/work/perforAppraisal/cal.png'),
      isDatePic: false,
      prisonInfo: [],
      queryDate: ''
    };
    this.onChange = value => {
      console.log(value);
      let aa = '';
      for (let i = 0; i < value.length; i++) {
        if (i + 1 != value.length) {
          aa += value[i] + '-';
        } else {
          aa += value[i];
        }
      }
      this.setState({ value, queryDate: aa });
    };
    this.onValueChange = (...args) => {
      console.log(args);
    };
  }
  componentDidMount() {
    getToken().then(token => {
      let params = {
        paeDate: moment().format('YYYY-MM-DD')
      };
      queryPoliceAppraisalList(token, params)
        .then(res => {
          this.setState({
            prisonInfo: [1]
          });
          const info = [];
          res.data.forEach(item => {
            console.log(item);
            info.push(...info, item);
          });
          this.setState({
            prisonInfo: info
          });
        })
        .catch(error => {
          this.setState({
            error: true,
            errorInfo: error
          });
        });
    });
  }

  render() {
    return (
      <View style={{ backgroundColor: '#fff', position: 'relative' }}>
        <HeadView
          style={{
            borderBottomWidth: 1,
            borderBottomColor: '#A2A9BD',
            position: 'relative'
          }}>
          <MovementTextTitle style={{ textAlign: 'center' }}>
            实绩考评
          </MovementTextTitle>
          <OnTouchableOpacity
            onPress={() => this.setState({ isDatePic: true })}
            style={{ position: 'absolute', right: 1 }}>
            <View>
              <Image
                source={this.state.imgUrl}
                style={{ width: 20, height: 20, margin: 5 }}
              />
            </View>
          </OnTouchableOpacity>
        </HeadView>
        <ScrollView
          style={{
            height: 625,
            backgroundColor: '#fff',
            position: 'relative'
          }}>
          <View style={{ margin: 10 }}>
            {this.state.prisonInfo.map(item => {
              return (
                <View
                  style={{
                    backgroundColor: '#fff',
                    borderRadius: 10,
                    borderWidth: 1
                  }}>
                  <AppraisalText>
                    民警姓名：
                    <InfoText>{item.policeBaseInfo.policeName}</InfoText>
                  </AppraisalText>
                  <AppraisalText>
                    主岗名称：<InfoText>{item.paeMajorpostName}</InfoText>
                  </AppraisalText>
                  <AppraisalText>
                    主岗加分：<InfoText>{item.paeMajorpostScore}</InfoText>
                  </AppraisalText>
                  <AppraisalText>
                    副岗名称：<InfoText>{item.paeVicepostName}</InfoText>
                  </AppraisalText>
                  <AppraisalText>
                    副岗加分：<InfoText>{item.paeVicepostScore}</InfoText>
                  </AppraisalText>
                  <AppraisalText>
                    绩效总分：<InfoText>{item.paePerformanceScore}</InfoText>
                  </AppraisalText>
                  <AppraisalText>
                    绩效加分：<InfoText>{item.paePlusScore}</InfoText>
                  </AppraisalText>
                  <AppraisalText>
                    绩效扣分：<InfoText>{item.paeMinusScore}</InfoText>
                  </AppraisalText>
                  <AppraisalText>
                    基础分数：<InfoText>{item.paeBaseScore}</InfoText>
                  </AppraisalText>
                  <AppraisalText>
                    月度评分：<InfoText>{item.paeMonthScope}</InfoText>
                  </AppraisalText>
                  <AppraisalText>
                    中队排名：<InfoText>第{item.paeRank}名</InfoText>
                  </AppraisalText>
                </View>
              );
            })}
          </View>
        </ScrollView>
        {this.state.isDatePic ? (
          <View
            style={{
              flex: 1,
              width: '100%',
              backgroundColor: '#fff',
              position: 'absolute',
              bottom: 0
            }}>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                flex: 1,
                borderBottomWidth: 1
              }}>
              <OnTouchableOpacity
                onPress={() => this.setState({ isDatePic: false })}>
                <DateText>取消</DateText>
              </OnTouchableOpacity>
              <OnTouchableOpacity>
                <Text style={{ fontSize: 25 }}>时间选择</Text>
              </OnTouchableOpacity>
              <OnTouchableOpacity
                onPress={() => {
                  getToken().then(token => {
                    let params = {
                      paeDate: this.state.queryDate
                    };
                    queryPoliceAppraisalList(token, params)
                      .then(res => {
                        this.setState({
                          prisonInfo: [1]
                        });
                        const info = [];
                        res.data.forEach(item => {
                          console.log(item);
                          info.push(...info, item);
                        });
                        this.setState({
                          prisonInfo: info,
                          isDatePic: false
                        });
                      })
                      .catch(error => {
                        this.setState({
                          error: true,
                          errorInfo: error
                        });
                      });
                  });
                }}>
                <DateText>确定</DateText>
              </OnTouchableOpacity>
            </View>
            <DatePickerView
              mode="date"
              value={this.state.value}
              onChange={this.onChange}
              onValueChange={this.onValueChange}
            />
          </View>
        ) : null}
      </View>
    );
  }
}

const MovementTextTitle = styled.Text`
  font-size: 20;
  margin-top: 5;
  margin-left: 10;
  font-weight: 500;
`;
const HeadView = styled.View``;
const DateText = styled.Text`
  font-size: 20;
  margin-left: 15;
  margin-right: 15;
`;
const AppraisalText = styled.Text`
  margin-left: 15;
  font-size: 20;
  color: #666;
`;
const InfoText = styled.Text`
  color: #070707;
`;
const OnTouchableOpacity = styled.TouchableOpacity``;
